import React, { useState } from 'react';
import { Card, Button, Avatar, Tag, message, Modal } from 'antd';
import { 
  WechatOutlined, 
  QqOutlined, 
  AlipayOutlined,
  GithubOutlined,
  LinkOutlined,
  DisconnectOutlined
} from '@ant-design/icons';

interface SocialAccount {
  id: string;
  type: 'wechat' | 'qq' | 'alipay' | 'github';
  name: string;
  avatar?: string;
  nickname: string;
  bindTime: string;
  status: 'connected' | 'disconnected';
}

const UserSocial: React.FC = () => {
  const [socialAccounts, setSocialAccounts] = useState<SocialAccount[]>([
    {
      id: '1',
      type: 'wechat',
      name: '微信',
      nickname: '微信用户',
      bindTime: '2024-01-15 10:30:00',
      status: 'connected'
    },
    {
      id: '2',
      type: 'qq',
      name: 'QQ',
      nickname: 'QQ用户',
      bindTime: '2024-01-10 14:20:00',
      status: 'disconnected'
    },
    {
      id: '3',
      type: 'github',
      name: 'GitHub',
      nickname: 'github_user',
      bindTime: '2024-01-05 09:15:00',
      status: 'connected'
    }
  ]);

  const getSocialIcon = (type: string) => {
    switch (type) {
      case 'wechat':
        return <WechatOutlined style={{ color: '#07c160' }} />;
      case 'qq':
        return <QqOutlined style={{ color: '#12b7f5' }} />;
      case 'alipay':
        return <AlipayOutlined style={{ color: '#1677ff' }} />;
      case 'github':
        return <GithubOutlined style={{ color: '#333' }} />;
      default:
        return <LinkOutlined />;
    }
  };

  const handleBind = (accountId: string) => {
    Modal.confirm({
      title: '绑定社交账号',
      content: '确定要绑定此社交账号吗？',
      onOk: () => {
        setSocialAccounts(prev => 
          prev.map(account => 
            account.id === accountId 
              ? { ...account, status: 'connected', bindTime: new Date().toLocaleString() }
              : account
          )
        );
        message.success('绑定成功');
      }
    });
  };

  const handleUnbind = (accountId: string) => {
    Modal.confirm({
      title: '解绑社交账号',
      content: '确定要解绑此社交账号吗？解绑后将无法使用该账号登录。',
      onOk: () => {
        setSocialAccounts(prev => 
          prev.map(account => 
            account.id === accountId 
              ? { ...account, status: 'disconnected' }
              : account
          )
        );
        message.success('解绑成功');
      }
    });
  };

  return (
    <div className="user-social-container">
      <div className="social-description">
        <p>绑定社交账号后，可以使用社交账号快速登录系统。</p>
      </div>

      <div className="social-accounts">
        {socialAccounts.map(account => (
          <Card
            key={account.id}
            className="social-account-card"
            size="small"
            hoverable
          >
            <div className="social-account-content">
              <div className="social-account-info">
                <div className="social-icon">
                  {getSocialIcon(account.type)}
                </div>
                <div className="social-details">
                  <div className="social-name">
                    {account.name}
                    <Tag 
                      color={account.status === 'connected' ? 'success' : 'default'}
                      style={{ marginLeft: 8 }}
                    >
                      {account.status === 'connected' ? '已绑定' : '未绑定'}
                    </Tag>
                  </div>
                  {account.status === 'connected' && (
                    <>
                      <div className="social-nickname">
                        {account.avatar && (
                          <Avatar size="small" src={account.avatar} style={{ marginRight: 8 }} />
                        )}
                        {account.nickname}
                      </div>
                      <div className="social-bind-time">
                        绑定时间：{account.bindTime}
                      </div>
                    </>
                  )}
                </div>
              </div>
              <div className="social-actions">
                {account.status === 'connected' ? (
                  <Button
                    type="text"
                    danger
                    icon={<DisconnectOutlined />}
                    onClick={() => handleUnbind(account.id)}
                  >
                    解绑
                  </Button>
                ) : (
                  <Button
                    type="primary"
                    icon={<LinkOutlined />}
                    onClick={() => handleBind(account.id)}
                  >
                    绑定
                  </Button>
                )}
              </div>
            </div>
          </Card>
        ))}
      </div>

      <div className="social-tips">
        <h4>注意事项：</h4>
        <ul>
          <li>绑定社交账号后，可以使用社交账号登录系统</li>
          <li>解绑社交账号不会影响当前登录状态</li>
          <li>建议至少保留一种登录方式</li>
        </ul>
      </div>
    </div>
  );
};

export default UserSocial;